import React from "react";
import styled from "styled-components";

import {
  comparisionColor,
  swapColor,
  sortedColor,
  pivotColor,
} from "./common/config";

import {
  ArrayHolder,
  ArrayItem,
  sourceAnimation,
  destinationAnimation,
} from "./common/styles";
import {Card} from "../Sort/Card";


export function ArrayContainer2({
  array,
  source,
  destination,
    pivot = -1,
  highlightIndices = [],
  sortedIndices = [],
}) {

  return (

      <div className="d-flex justify-content-center align-content-center text-center">
        {array.map((value, i) => {
          return (
              <div className={"text-center"}>
                <div>
                  <ArrayItem
                    key={i + ":" + destination + ":" + source + ":" + value}
                    style={{
                      order: i,
                      backgroundColor: ""
                    }}
                  >
                    {value}
                  </ArrayItem>
                </div>
                <div>{i}</div>
              </div>

          );
        })}
      </div>

  );
}
